﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Using API</title>
    <link href="Presention/ComicShopStyle.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        function btnSearchJson_onClick() {
            var query = document.getElementById("txbSearchJson").value;
            var xmlhttp;
            var result;
            
            if (window.XMLHttpRequest) {
                xmlhttp = new XMLHttpRequest();
            }
            else {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }

            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

                    result = eval('(' + xmlhttp.responseText + ')');
                    var txt = "";
                    for (var i = 0; i < result.query.search.length; i++) {
                        txt += "<button onclick=\"btnSearchXML_onClick(" +"'" +result.query.search[i].title +"'"+ ")\">" + result.query.search[i].title + "</button></br>" + result.query.search[i].snippet + "<br />";
                    }
                    document.getElementById("JsonResult").innerHTML = txt;
                }
            };
            
            xmlhttp.open("GET", "http://en.wikipedia.org/w/api.php?action=query&list=search&format=json&srsearch=" + query, true);
            xmlhttp.setRequestHeader("Content-Type", "application/json; charset=utf-8");
            xmlhttp.send();
        }
    </script>
    <script type="text/javascript">
        function btnSearchXML_onClick(title) {
            var xmlhttp;
            var xmlDoc;

            if (window.XMLHttpRequest) {
                xmlhttp = new XMLHttpRequest();
            }
            else {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }

            xmlhttp.onreadystatechange = function() {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    if (window.DOMParser) {
                        var parser = new DOMParser();
                        xmlDoc = parser.parseFromString(xmlhttp.responseText, "text/xml");
                    } else // Internet Explorer
                    {
                        xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
                        xmlDoc.async = false;
                        xmlDoc.loadXML(xmlhttp.responseText);
                    }
                    try {
                        var search = xmlDoc.getElementsByTagName("query")[0];
                        var txt = "";
                        var children = search.childNodes[0].childNodes[0].attributes;
                        for (var i = 0; i < children.length; i++) {
                            var p = children[i].nodeName;
                            var q = children[i].nodeValue;
                            txt += "<span><b>" + p + ": </b></span></br>" + q + "<br />";
                        }
                        document.getElementById("XMLResult").innerHTML = txt;
                    }
                    catch(e) {
                        document.getElementById("XMLResult").innerHTML = "service is down";
                    }
                }
            };

            xmlhttp.open("GET", "http://en.wikipedia.org/w/api.php?action=query&prop=info&format=xml&titles=" + title, true);
            xmlhttp.setRequestHeader("Content-Type", "application/xml; charset=utf-8");
            xmlhttp.send();
        }
    </script>
</head>
<body>
    <header>
        <h2>
            <img src="Images/pow.jpg" width="50" height="30" />
            Comics Shop Web Service by Nadav Lichtenshtein & Idan Morad
        </h2>
    </header>
    <section>
        <h3 align="center">
        Search your favorite Character via Wikipedia
        </h3>
        Search: <input id="txbSearchJson" type="text" /><input id="btnSearchJson" type="button" value="Search!" onclick="btnSearchJson_onClick()"/><br /><br />
        click on a button to show the page info: <br />
        <div id="JsonResult"></div><br />
        
        <div id="XMLResult"></div><br />
    </section>
    <footer>
        <p align="center">
            <strong><a href="mailto:idanmora@post.bgu.ac.il" class="contactButton">Contact Us!</a><br />
                This site was build as fourth assignment in Internet Programming Environments course.
            </strong>
        </p>
    </footer>
</body>
</html>
